<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加出货记录</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <input type="hidden" :unid="this.getuniddata">
      <div class="formcontent">
        <ul>
          <li>
            <span>
              <em>*</em>食品类型</span>
            <div class="froms">
              <el-radio-group v-model="DemandWarehouse.radio2" size="mini" @change="radioclick()">
                <el-radio :label="0">预包装食品</el-radio>
                <el-radio :label="1">食用农场品</el-radio>
                <el-radio :label="2">散装加工食品</el-radio>
              </el-radio-group>

            </div>
          </li>
          <li>
            <span>
              <em>*</em>食品类别</span>
            <div class="froms">
              <el-select v-model="DemandWarehouse.Foodtype" placeholder="请选择食品类别">
                <el-option v-for="item in Category" :key="item.unid" :value="item.id" :label="item.name">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span>
              <em>*</em>食品名称</span>
            <div class="froms">
              <input @click="DemandWarehousehandleClick" type="button" class="text_l" v-model="DemandWarehouse.Name">
            </div>
            <mt-popup v-model="DemandWarehouseNamepup" position="right" modal=false class="mint-popup-3">
              <header class="head">
                <a class="back tl" @click="clickmodl">
                  <i class="el-icon-arrow-left"></i>
                </a>
                <a href="javascript:;" class="tc">
                  <small class="font_18 co_f">进货记录</small>
                </a>
              </header>
              <main>
                <div class="seachfrom">
                  <div class="seachbox">
                    <el-input placeholder="请输入内容" v-model="seachtext">
                      <el-button slot="append" icon="search" @click="seach()"></el-button>
                    </el-input>
                  </div>
                </div>
                <div>
                  <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" ref="loadmore">
                    <ul class="datalist">
                      <li v-for='(item,index) of Purchase' :foodunid='item.demandWarehouse.demandType.unid' :foodname="item.demandWarehouse.name" :foodbrand="item.demandWarehouse.brand" :foodnorms="item.demandWarehouse.norms" @click="foodClick(item.demandWarehouse.demandType.unid,item.demandWarehouse.name,item.demandWarehouse.brand,item.demandWarehouse.norms)">
                        <div class="items-img">
                          <img src="../../assets/iconimg.png" />
                        </div>
                        <div class="items-text">
                          <p>{{item.demandWarehouse.name}}</p>
                          <p>进货数量{{item.num}}</p>
                          <p>规格/含量：{{item.norms}}</p>
                          <p>进货日期：{{item.stockDate}}</p>
                        </div>
                      </li>
                    </ul>

                  </v-loadmore>
                </div>
              </main>
            </mt-popup>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2===1">
            <span>
              <em>*</em>品牌</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Brand">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0">
            <span>
              <em>*</em>规格净含量</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Norms">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2===2">
            <span>生产日期批号</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.dataValue" @click="openPicker()">
              </el-input>
              <!-- <button class="el-icon-date" @click="openPicker()" v-model="DemandWarehouse.dataValue">选择时间{{this.DemandWarehouse.dataValue}} <i class="el-icon-date"></i></button>
                -->
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCancel" @confirm="handleConfirm"></mt-datetime-picker>
            </div>

          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2===2">
            <span>
              <em>*</em>生产商</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Producers">
            </div>
          </li>
          <li>
            <span>
              <em>*</em>出库数量</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Shipments">
            </div>
          </li>
          <li>
            <span>
              <em>*</em>数量单位</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Unit">
            </div>
          </li>
          <li>
            <span>出货日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.dataValue2" @click="openPickerStockDate()">
              </el-input>
              <mt-datetime-picker ref="picker2" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueStockDate" @cancel="handleCancelStockDate" @confirm="handleConfirmStockDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>
              <em>*</em>记录人员</span>
            <div class="froms">
              <input type="text" disabled v-model="DemandWarehouse.RecordPersonName">

            </div>
          </li>
          <li>
            <span>
              <em>*</em>记录时间</span>
            <div class="froms">
              {{this.DemandWarehouse.datatime|time}}
            </div>
          </li>
        </ul>
        <div class="uploadbox">
          <i class="el-icon-document"></i>上传购票票据，食品合格证明文件
          <div class="img-btnbox">
            <div class="show">
              <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
            </div>
            <div class="showclick">
              <input type="file" id="upload" accept="image" @change="upload">
              <label for="upload"></label>
            </div>
          </div>
        </div>
        <div>
          <ul>
            <li v-for='item of FileDatalist' :unid="item.unid" :path="item.fullPath">
              {{item.fullFileName}}
              <el-button type="primary" icon="search" class="c_f" size="small" @click="imgview(item.fullPath)">查看</el-button>
              <el-button type="primary" icon="delete2" class="c_f" size="small" @click="deletefile(item.unid)">删除</el-button>
            </li>
          </ul>
          <mt-popup v-model="popupVisible" modal=false class="mint-popup-2">
            <img src='' id="imgInit">
          </mt-popup>
        </div>
      </div>

    </main>
  </div>
</template>

<script>
import {
  DemandType
} from '../../api/api';
import {
  GetGuid
} from '../../api/api';

import {
  UploadSingleFile
} from '../../api/api';

import {
  FileData
} from '../../api/api';
import {
  DeleteFile
} from '../../api/api';
import {
  DemandCertificateOutputAdd
} from '../../api/api';
import {
  DatetimePicker
} from 'mint-ui';
import { Loadmore } from 'mint-ui';
import { Popup } from 'mint-ui';
import {
  DemandCertificate
} from '../../api/api';
var moment = require('moment');
import Exif from 'exif-js';
import DemandWarehouseName from '@/components/jhjllist'
export default {
  name: 'add_mrcj',
  components: {
    'mt-datetime-picker': DatetimePicker,
    'mt-popup': Popup,
    'DemandWarehouseName': DemandWarehouseName,
    'v-loadmore': Loadmore,
  },
  data() {
    return {
      popupVisible: false,
      DemandWarehouseNamepup: false,
      pickerValue: moment().format('YYYY-MM-DD'),
      label: '',
      pickerValueStockDate: '',
      startDate: new Date(),
      CriteriaList: [],
      //表单
      DemandWarehouse: {
        radio2: 0,
        Foodtype: '',
        Name: '请选择食品名称',
        Brand: '',
        Foodunid: '',
        Norms: '',
        Num: '',
        Producers: '',
        Unit: '',
        RecordPersonName: JSON.parse(localStorage.getItem('auth')).enterpriseName,
        dataValue: '',
        dataValue2: '',
        DeadlineDate: '',
        datatime: this.datatime(),
      },
      Category: [],//食品类别
      Purchase: [],//进货记录
      PageSize: 5,
      CurrentPage: 1,
      seachtext: '',
      //上传图片
      headerImage: '',
      picValue: '',
      //unidoption:'',
      getuniddata: '',
      FileDatalist: [],
    };
  },

  methods: {
    //食品类别
    Categoryunid: function() {
      let Categoryunid = {
        params: {
          enterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid
        }
      }
      DemandType(Categoryunid).then((res) => {
        if (res.success === true) {
          this.Category = res.data
        }
      })
    },
    //获取当前时间
    datatime: function() {
      var moment = require('moment');
      var currentdate = moment().format('YYYY-MM-DD hh:mm:ss');
      return currentdate;
    },
    //生产日期时间
    openPicker() {
      this.$refs.picker.open();
    },
    handleCancel() {
      let _this = this
      _this.pickerValue = _this.DemandWarehouse.dataValue
    },
    // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
    handleConfirm(val) {
      let _this = this
      _this.DemandWarehouse.dataValue = moment(val).format('YYYY-MM-DD hh:mm:ss')
    },
    //出货日期
    openPickerStockDate() {
      this.$refs.picker2.open();
    },
    handleCancelStockDate() {
      let _this = this
      _this.pickerValueStockDate = _this.DemandWarehouse.dataValue2
    },
    // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
    handleConfirmStockDate(val) {
      let _this = this
      _this.DemandWarehouse.dataValue2 = moment(val).format('YYYY-MM-DD hh:mm:ss')
    },

    //单选按钮change事件
    radioclick: function() {

    },
    //食品名称开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    loadTop: function() { //组件提供的下拉触发方法  
      //下拉刷新
      if (this.CurrentPage <= 0) {
        this.CurrentPage = 1;
      } else {
        this.Purchase = [];
        this.DemandWarehouseinfo();
      }
      this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
    },
    loadBottom: function() {
      // 上拉加载  
      this.CurrentPage += 1;
      this.DemandWarehouseinfo();
      // 上拉触发的分页查询  
      //this.allLoaded = true;
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
    },
    foodClick: function(foodunid, foodname, foodbrand, foodnorms) {
      this.DemandWarehouse.Name = foodname;
      this.DemandWarehouse.Brand = foodbrand;
      this.DemandWarehouse.Norms = foodnorms;
      //this.DemandWarehouse.Producers= producers;
      this.DemandWarehouse.Foodunid = foodunid;
      this.clickmodl();
    },
    seach: function() {
      this.Purchase = [];
      this.CriteriaList[0] = {
        Name: 'DemandWarehouse.Name',
        Value: '%' + this.seachtext + '%',
        Operate: 'Like',
        DataType: null,
        EndSuffix: '',
        Suffix: null
      };
      this.CriteriaList[1] = {
        Name: 'Brand',
        Value: '%' + this.seachtext + '%',
        Operate: 'Like',
        DataType: null,
        EndSuffix: '',
        Suffix: null
      };
      this.CriteriaList[2] = {
        Name: 'Producers',
        Value: '%' + this.seachtext + '%',
        Operate: 'Like',
        DataType: null,
        EndSuffix: '',
        Suffix: null
      };
      this.DemandWarehouseinfo();
    },
    DemandWarehousehandleClick: function() {
      this.DemandWarehouseNamepup = true
      this.DemandWarehouseinfo();
      this.Purchase = [];
      //进货记录获取
    },
    clickmodl: function() {
      this.DemandWarehouseNamepup = false
    },
    DemandWarehouseinfo() {
      //  if(this.DemandWarehouse.radio2!=0){
      //           this.CriteriaList[0]={
      //                   Name :'Type',
      //                   Value:this.DemandWarehouse.radio2,
      //                   Operate:'Equal',
      //                   DataType: null,
      //                   EndSuffix: '',
      //                   Suffix:null
      //                 }
      //  }
      let varQueryData = {
        PageSize: this.PageSize,
        CurrentPage: this.CurrentPage,
        Query: {
          CriteriaList: [],
          SubQueryList: []
        }
      }
      if (this.CriteriaList.length !== 0) {
        let SubQueryList = [{
          CriteriaList: this.CriteriaList,
          Relation: 'or'
        }]
        varQueryData.Query.SubQueryList = SubQueryList;
      }
      let options = {
        params: {
          UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
          QueryData: JSON.stringify(varQueryData)
        }
      }
      //调取接口
      DemandCertificate(options).then((res) => {
        if (res.success === true) {
          this.Purchase = this.Purchase.concat(res.data);
        }

      })
    },

    //食品名称结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
    //提交方法
    submitForm: function() {
      let varDemandWarehouse = {
        DemandType: {
          Unid: this.DemandWarehouse.Foodunid,
        },
        Name: this.DemandWarehouse.Name,
      }
      let varEnterpriseUnid = {
        Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
        Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
      }
      let data = {
        Unid: this.getuniddata,
        Type: this.DemandWarehouse.radio2,
        DemandWarehouse: varDemandWarehouse,
        Brand: this.DemandWarehouse.Brand,
        Norms: this.DemandWarehouse.Norms,
        Producers: this.DemandWarehouse.Producers,
        ProductionDate: this.DemandWarehouse.dataValue,
        Unit: this.DemandWarehouse.Unit,
        Shipments: this.DemandWarehouse.Shipments,
        StockDate: this.DemandWarehouse.dataValue2,
        RecordPersonName: JSON.parse(localStorage.getItem('auth')).enterpriseName,
        RecordPersonUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
        RecordDate: this.DemandWarehouse.datatime,
        Enterprise: varEnterpriseUnid,
        EnterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
      }
      let dataoption = {
        params: {
          Type: this.DemandWarehouse.radio2,
          Data: JSON.stringify(data),
          UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
        }
      }
      //调取接口
      DemandCertificateOutputAdd(dataoption).then((res) => {
        if (res.success === true) {
          this.$message.success('保存成功');
          this.$router.go(-1);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(function() {
        this.$message.error('网络异常。');
      })
    },
    //点击查看
    imgview: function(path) {
      this.popupVisible = true
      var  adres = "http://psnffs.com/" + path;
      document.getElementById('imgInit').src  =  adres;
    },
    //删除
    deletefile: function(unid) {
      let FileDataparam = {
        params: {
          unids: unid
        }
      }
      DeleteFile(FileDataparam).then((res) => {
        if (res.success === true) {
          this.getfilelist()
        }
      })
    },

    //图片上传开始
    upload(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.picValue = files[0];
      this.imgPreview(this.picValue);
    },
    imgPreview(file) {
      let self = this;
      let Orientation;
      //去获取拍照时的信息，解决拍出来的照片旋转问题  
      Exif.getData(file, function() {
        Orientation = Exif.getTag(this, 'Orientation');
      });
      // 看支持不支持FileReader  
      if (!file || !window.FileReader) return;

      if (/^image/.test(file.type)) {
        // 创建一个reader  
        let reader = new FileReader();
        // 将图片2将转成 base64 格式  
        reader.readAsDataURL(file);
        // 读取成功后的回调  
        reader.onloadend = function() {
          let result = this.result;
          let img = new Image();
          img.src = result;
          //判断图片是否大于100K,是就直接上传，反之压缩图片  
          if (this.result.length <= (100 * 1024)) {
            self.headerImage = this.result;
            self.postImg();
          } else {
            img.onload = function() {
              let data = self.compress(img, Orientation);
              self.headerImage = data;
              self.postImg();
            }
          }
        }
      }
    },
    //获取32unid
    getunid: function() {
      //调取接口
      GetGuid().then((res) => {
        if (res.success === true) {
          this.getuniddata = res.data;
        }
      })
    },
    getfilelist() {
      let FileDataparam = {
        params: {
          MainDataUnid: this.getuniddata,//"45958c55136646d099965da7b9001853"
          PageSize: 100,
          CurrentPage: 1
        }
      }
      FileData(FileDataparam).then((res) => {
        if (res.success === true) {
          this.FileDatalist = res.data;
        }
      })
    },
    postImg() {
      //上传图片
      let filecontent = this.headerImage.split('base64,')[1]
      let paramFile = {
        MainDataUnid: this.getuniddata,
        UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
        FileContent: filecontent,
        InFileName: this.picValue.name,
        AliasData: '',
        AliasDataSort: '',
      }
      UploadSingleFile(paramFile).then((res) => {
        if (res.success === true) {
          this.getfilelist();
        }
      })

    },
    rotateImg(img, direction, canvas) {
      //最小与最大旋转方向，图片旋转4次后回到原方向      
      const min_step = 0;
      const max_step = 3;
      if (img == null) return;
      //img的高度和宽度不能在img元素隐藏后获取，否则会出错      
      let height = img.height;
      let width = img.width;
      let step = 2;
      if (step == null) {
        step = min_step;
      }
      if (direction == 'right') {
        step++;
        //旋转到原位置，即超过最大值      
        step > max_step && (step = min_step);
      } else {
        step--;
        step < min_step && (step = max_step);
      }
      //旋转角度以弧度值为参数      
      let degree = step * 90 * Math.PI / 180;
      let ctx = canvas.getContext('2d');
      switch (step) {
        case 0:
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0);
          break;
        case 1:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, 0, -height);
          break;
        case 2:
          canvas.width = width;
          canvas.height = height;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, -height);
          break;
        case 3:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, 0);
          break;
      }
    },
    compress(img, Orientation) {
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext('2d');
      //瓦片canvas  
      let tCanvas = document.createElement("canvas");
      let tctx = tCanvas.getContext("2d");
      let initSize = img.src.length;
      let width = img.width;
      let height = img.height;
      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  
      let ratio;
      if ((ratio = width * height / 4000000) > 1) {
        console.log("大于400万像素")
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
      } else {
        ratio = 1;
      }
      canvas.width = width;
      canvas.height = height;
      //        铺底色  
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      //如果图片像素大于100万则使用瓦片绘制  
      let count;
      if ((count = width * height / 1000000) > 1) {
        console.log("超过100W像素");
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  
        //            计算每块瓦片的宽和高  
        let nw = ~~(width / count);
        let nh = ~~(height / count);
        tCanvas.width = nw;
        tCanvas.height = nh;
        for (let i = 0; i < count; i++) {
          for (let j = 0; j < count; j++) {
            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
          }
        }
      } else {
        ctx.drawImage(img, 0, 0, width, height);
      }
      //修复ios上传图片的时候 被旋转的问题  
      if (Orientation != "" && Orientation != 1) {
        switch (Orientation) {
          case 6: //需要顺时针（向左）90度旋转  
            this.rotateImg(img, 'left', canvas);
            break;
          case 8: //需要逆时针（向右）90度旋转  
            this.rotateImg(img, 'right', canvas);
            break;
          case 3: //需要180度旋转  
            this.rotateImg(img, 'right', canvas); //转两次  
            this.rotateImg(img, 'right', canvas);
            break;
        }
      }
      //进行最小压缩  
      let ndata = canvas.toDataURL('image/jpeg', 0.1);
      console.log('压缩前：' + initSize);
      console.log('压缩后：' + ndata.length);
      console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
      return ndata;
    }
  },
  mounted() {
    this.getunid();
    this.Categoryunid();
    //监听滚动
  }
}
</script>
<style lang="scss">
.uploadbox {
  position: relative;
  margin: 20px 0px;
  padding-left: 10px
}

.img-btnbox {
  position: absolute;
  right: 10px;
  top: -5px;
  width: 25px;
  height: 25px;
  overflow: hidden;
}

.showclick {
  position: relative;
  cursor: pointer;
  color: #888;
  background: url("../../img/add.png") no-repeat;
  background-size: contain;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  input {
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
}

.el-radio__label {
  margin-top: 2px;
}

.disabled {
  display: none
}

//重构
.items-text {
  p {
    margin: 0em !important;
    padding: 0em !important;
    line-height: 20px;
  }
}
</style>
